import ReactDOM from 'react-dom'
import React, { Component } from 'react'

class Parent extends Component {
  state = {
    money: 10000
  }

  // 修改金钱函数
  updateMoney = price => {
    // console.log('买手机', price)
    this.setState({ money: this.state.money - price })
  }

  render () {
    return (
      <div>
        父组件：{this.state.money}
        <Child money={this.state.money} updateMoney={this.updateMoney}/>
      </div>
    )
  }
}

const Child = (props) => {
  const handleClick = () => {
    // 点击了买手机按钮，通知父组件修改金钱
    props.updateMoney(4999)
  }
  return (
    <div>
      子组件：{props.money} <button onClick={handleClick}>买手机</button>
    </div>
  )
}


// 根组件
class App extends Component {
  render() {
    return (
      <>
       <Parent />
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))